<template>
   <!-- 工作日历 -->
   <div>
      <!-- 年和月 -->
      <el-row type="flex" justify="end">
         <!-- 年，用组件的人给定一个日期，通过日期获取年，取它的前5年 + 后5年 -->
         <el-select
            size="small"
            style="width: 120px"
            v-model="currentYear"
            @change="dateChange"
         >
            <el-option
               v-for="item in yearList"
               :key="item"
               :label="item"
               :value="item"
            ></el-option>
         </el-select>
         <el-button @click="btn1" class="myToday">今天</el-button>
         <el-select
            size="small"
            style="width: 120px; margin-left: 10px"
            v-model="currentMonth"
            @change="dateChange"
         >
            <!-- 循环月份 -->
            <el-option
               v-for="item in 12"
               :key="item"
               :label="item"
               :value="item"
            ></el-option>
         </el-select>
      </el-row>
      <!-- 日历组件 -->
      <el-calendar v-model="currentDate">
         <!-- <template slot="dateCell">
         <template v-slot:dateCell> -->
         <!-- 在 scoped-slot 可以获取到 date（当前单元格的日期）, 
         data（包括 type，isSelected，day 属性） -->
         <!-- date 是当前单元格的日期，data 是对象，对象里有要显示的 day -->
         <template #dateCell="{date, data}">
            <div class="date-content">
               <span class="text">{{ data.day | getDay }}</span>
               <span v-if="isWeek(date)" class="rest">休</span>
            </div>
         </template>
      </el-calendar>
   </div>
</template>

<script>
export default {
   filters: {
      getDay(value) {
         const day = value.split('-')[2]
         // 判断一下这个 day
         return day.startsWith('0') ? day.substr(1) : day
      }
   },
   props: {
      // 如果没有传递时间 startDate，就取当前时间
      startDate: {
         type: Date,
         // 需要一个回调函数式的返回值，因为类型是 对象 或者 数组
         default: () => new Date()
      }
   },
   data() {
      return {
         // 要遍历的年的数组
         yearList: [],
         // 当前年份
         currentYear: null,
         // 当前月份
         currentMonth: null,
         // 当前时间，随着年和月的变化而变化
         currentDate: null
      }
   },
   created() {
      // 获取当前的年份
      this.currentYear = this.startDate.getFullYear()
      // 获取当前月份
      this.currentMonth = this.startDate.getMonth() + 1
      // 快速生成数组的方法
      this.yearList = Array.from(
         Array(11),
         (v, i) => this.currentYear + i - 5
      )
      // 当钩子函数执行完成之后，初始化之后，也应该生成一个新的时间
      // 主动调用一下方法
      this.dateChange()
      // 刚开始进去是今天的时间
      this.currentDate = new Date()
   },
   methods: {
      dateChange() {
         // 生成新的日期,当我执行这个变化时已经是最新的了
         // console.log(this.currentYear)
         // 以 1 号为开始，默认写个 1
         this.currentDate = new Date(
            `${this.currentYear}-${this.currentMonth}-1`
         )
      },
      // 判断当前是否是周末，data就是当前时间
      isWeek(data) {
         return data.getDay() === 6 || data.getDay() === 0
      },
      btn1() {
         this.currentDate = new Date()
      }
   }
}
</script>

<style scoped>
::v-deep .el-calendar-day {
   height: auto;
}
::v-deep .el-calendar-table__row td,
::v-deep .el-calendar-table tr td:first-child,
::v-deep .el-calendar-table__row td.prev {
   border: none;
}
.date-content {
   height: 40px;
   text-align: center;
   line-height: 40px;
   font-size: 14px;
}
.date-content .rest {
   color: #fff;
   border-radius: 50%;
   background: rgb(250, 124, 77);
   width: 20px;
   height: 20px;
   line-height: 20px;
   display: inline-block;
   font-size: 12px;
   margin-left: 10px;
}
.date-content .text {
   width: 20px;
   height: 20px;
   line-height: 20px;
   display: inline-block;
}
::v-deep .el-calendar-table td.is-selected .text {
   background: #409eff;
   color: #fff;
   border-radius: 50%;
}
::v-deep .el-calendar__header {
   display: none;
}
.myToday {
   border: 1px solid #fff;
}
</style>
